"use client"

import { usePathname, useRouter } from "next/navigation"
import { Home, ShoppingCart, User } from "lucide-react"
import { cn } from "@/lib/utils"
import { useContext } from "react"
import { UserContext } from "@/app/layout"

export function Tabbar() {
  const pathname = usePathname()
  const router = useRouter()
  const { userRole } = useContext(UserContext)

  const tabs = [
    {
      name: "首页",
      href: "/",
      icon: Home,
      active: pathname === "/",
    },
    {
      name: "货盘",
      href: "/cart",
      icon: ShoppingCart,
      active: pathname === "/cart",
    },
    {
      name: "我的",
      href: "/profile",
      icon: User,
      active: pathname === "/profile",
    },
  ]

  return (
    <div className="fixed bottom-0 left-0 right-0 border-t bg-background">
      <div className="flex justify-around">
        {tabs.map((tab) => (
          <button
            key={tab.name}
            className={cn(
              "flex flex-1 flex-col items-center py-2",
              tab.active ? "text-primary" : "text-muted-foreground",
            )}
            onClick={() => router.push(tab.href)}
          >
            <tab.icon className="h-5 w-5" />
            <span className="text-xs">{tab.name}</span>
          </button>
        ))}
      </div>
    </div>
  )
}

